<template>
	<view>
		<!-- 搜索 -->
		<view class="header">
			<view class="search">
				<view class="image-box">
					<image src="../../../../static/icon/job.png" mode=""></image>
				</view>
				<input class="search-input" type="text" name="searchName" :value="renterName" placeholder="请输入姓名"
					confirm-type="search" @confirm="renterSearch" />
			</view>
			<view class="m-tabs">
				<view v-for="(item, index) in menu" :key="index" @click="menuChange(index)">
					<view class="u-tabs-itm" :class="currentMenuIndex == item.current ? 'active' : ''">
						<view class="u-tabs-title" @click="menuTitleChange(index)">
							<view>{{item.name}}</view>
						</view>
						<picker mode="selector" :range="item.stateList" range-key="name" :value="item.stateIndex"
							@change="stateChange">
							<view class="u-tabs-state"
								:class="currentMenuIndex == item.current ? 'state-active' : ''">
								<view>
									{{item.stateList[item.stateIndex].name ? item.stateList[item.stateIndex].name : '全部'}}
								</view>
								<image src="../../../../static/icon/arrow-bottom.png" mode=""></image>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: 70vh;">
		<view class="m-list3">
			<view class="u-list3-itm" v-for="(item, index) in auditList" :key="index">
				<view class="u-list3-itm-content">
					<view class="u-list3-l f-row">
						<image class="u-list3-img" src="../../../../static/icon/act-my.png" mode=""></image>
						<view>{{item.snapshot ? item.snapshot.name: ''}}</view>
					</view>
					<view class="u-list3-m f-row">
						<image class="u-list3-img" src="../../../../static/icon/act-city.png" mode=""></image>
						<view>{{item.room ? item.room.door_number : '无房号'}}</view>
					</view>
					<view class="u-list3-r f-row">
						<view class="u-list3-btn1">
							<button class="u-btn" v-if="item.state == 1">待审核</button>
							<button class="u-btn" v-if="item.state == 2" style="background-color: #2A9F93; color: #fff;">已通过</button>
							<button class="u-btn" v-if="item.state == 3">未通过</button>
						</view>
						<view class="u-list3-btn2">
							<button class="u-btn" type="warn">删除</button>
						</view>
					</view>
				</view>
			</view>
			<view class="u-list3-itm" v-for="(item, index) in auditList" :key="index">
				<view class="u-list3-itm-content">
					<view class="u-list3-l f-row">
						<image class="u-list3-img" src="../../../../static/icon/act-my.png" mode=""></image>
						<view>{{item.snapshot ? item.snapshot.name: ''}}</view>
					</view>
					<view class="u-list3-m f-row">
						<image class="u-list3-img" src="../../../../static/icon/act-city.png" mode=""></image>
						<view>{{item.room ? item.room.door_number : '无房号'}}</view>
					</view>
					<view class="u-list3-r f-row">
						<view class="u-list3-btn1">
							<button class="u-btn" v-if="item.state == 1">待审核</button>
							<button class="u-btn" v-if="item.state == 2" style="background-color: #2A9F93; color: #fff;">已通过</button>
							<button class="u-btn" v-if="item.state == 3">未通过</button>
						</view>
						<view class="u-list3-btn2">
							<button class="u-btn" type="warn">删除</button>
						</view>
					</view>
				</view>
			</view>
			<view class="footer" v-show="showMore">
				暂无更多数据
			</view>
		</view>
		</scroll-view>
	

	</view>
</template>

<script>
	import USER from '@/api/user/index.js'

	let app = getApp();

	export default {
		data() {
			return {
				currentMenuIndex: 0,
				auditList: [],
				showMore: false,
				page: 1,
				menu: [{
					current: 0,
					type: 2,
					name: '租客管理',
					stateList: [{
							name: '全部',
							value: 0
						},
						{
							name: '待审核',
							value: 1
						},
						{
							name: '已通过',
							value: 2
						},
						{
							name: '未通过',
							value: 3
						}
					],
					stateIndex: '0'
				}, {
					current: 1,
					type: 3,
					name: '家庭成员',
					stateList: [{
							name: '全部',
							value: 0
						},
						{
							name: '待审核',
							value: 1
						},
						{
							name: '已通过',
							value: 2
						},
						{
							name: '未通过',
							value: 3
						}
					],
					stateIndex: '0'
				}, {
					current: 2,
					type: 4,
					name: '物业管理',
					stateList: [{
							name: '全部',
							value: 0
						},
						{
							name: '待审核',
							value: 1
						},
						{
							name: '已通过',
							value: 2
						},
						{
							name: '未通过',
							value: 3
						}
					],
					stateIndex: '0'
				}],

				renterName: '',
				auditState: 0,
				audit_address_id: '',
				audit_identity_type: ''
			}
		},
		mounted() {
			this.firstAuditList();
		},
		methods: {
			getAuditList() {
				var self = this;
				uni.showLoading({
					title: '获取数据中',
					mask: true
				})
				USER.auditList(self.page, 10, self.audit_address_id, self.audit_identity_type1, self.audit_identity_type2,
						self.renterName, self
						.auditState)
					.then(res => {
						uni.hideLoading();
						if (res.data.data.length == 0) {
							self.showMore = true;
						}
						self.auditList = self.auditList.concat(res.data.data);
					});
			},
			firstAuditList() {
				var self = this;
				self.audit_address_id = app.globalData.intoRentAddressId; // 地址id
				self.audit_identity_type1 = app.globalData.intoIdentityType; // 身份类型
				self.audit_identity_type2 = self.menu[0].type; // 身份类型
				self.getAuditList();
			},
			// 下拉刷新
			onReachBottom() {
				var self = this;
				self.page += 1;
				if (!self.showMore) {
					self.getAuditList();
				}
			},
			// 搜索租户
			renterSearch(e) {
				var self = this;
				self.page = 1;
				self.auditList = [];
				self.renterName = e.detail.value;
				self.getAuditList();
			},
			menuChange(index) {
				var self = this;
				self.currentMenuIndex = index;
			},
			menuTitleChange(index) {
				var self = this;
				self.audit_identity_type2 = self.menu[index].type; // 身份类型
				self.auditState = self.menu[index].stateList[self.menu[index].stateIndex].value; // 审核状态
				self.page = 1;
				self.auditList = [];
				self.getAuditList();
			},
			stateChange(e) {
				var self = this;
				self.menu[self.currentMenuIndex].stateIndex = e.detail.value;
				self.audit_identity_type2 = self.menu[self.currentMenuIndex].type; // 身份类型
				self.auditState = self.menu[self.currentMenuIndex].stateList[self.menu[self.currentMenuIndex].stateIndex]
					.value; // 审核状态
				self.page = 1;
				self.auditList = [];
				self.getAuditList();
			}

		}
	}
</script>

<style scoped lang="scss">
	.header {
		margin: 30rpx;


		.search {
			display: flex;
			align-items: center;
			height: 70rpx;
			border: 1rpx solid #ccc;
			border-radius: 20rpx;
			box-shadow: 0px 5rpx 20rpx #ccc;

			.image-box {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 30rpx;
				padding: 20rpx;
				border-right: 1rpx solid #ccc;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.search-input {
				width: 600rpx;
				font-size: 28rpx;
				padding-left: 10rpx;
			}
		}

		.m-tabs {
			display: flex;
			margin-top: 20rpx;
			justify-content: space-between;

			.u-tabs-itm {
				width: 180rpx;
				text-align: center;
				padding: 20rpx;
				border-radius: 20rpx;
				box-shadow: 0px 5rpx 20rpx #ccc;
			}

			.u-tabs-title {
				font-size: 36rpx;
			}

			.u-tabs-state {
				display: flex;
				justify-content: space-between;
				align-items: center;

				margin-top: 20rpx;
				padding: 4rpx 10rpx;
				border: 1rpx #000 solid;
				border-radius: 10rpx;
				font-size: 28rpx;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}

			.state-active {
				border: 1rpx solid #fff;
			}
		}
	}
	
	.active {
		background-color: #2A9F93;
		color: #FFFFFF;
	}
</style>
